<template>
  <div class="public">
    <van-swipe class="my-swipe" autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="my-swipe-item"
        v-for="(item, idx) in imgList"
        :key="idx"
      >
        <van-image width="100%" height="100%" v-lazy="image" :src="item.img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 点击支付 -->
    <button @click="onPay">支付100万</button>
  </div>
</template>

<script>
import { apiGetBannerList,apiAliPay } from "@/api";
export default {
  data() {
    return {
      imgList: [],
    };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      // 获取banner列表
      apiGetBannerList().then((res) => {
        this.imgList = res.data;
      });
    },
    onPay() {
        // 直接调用支付接口
        apiAliPay({shopName: '呼和浩特款郊区大别野', price: '1000000'}).then(res => {
            console.log(res)
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 132px;
  .my-swipe-item {
    width: 100%;
    height: 100%;
    img: {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
